<template>
  <div class="app-main">
    <div class="app-main-item">
      <div class="app-main-left"></div>
      <div class="app-main-num">{{arr.assessNumber}}</div>
      <div class="app-main-txt">中国地震局</div>
    </div>
    <div class="app-main-item">
      <div class="app-main-left"></div>
      <div class="app-main-num">{{brr.assessNumber}}</div>
      <div class="app-main-txt">国家减灾中心</div>
    </div>
    <!-- <div class="app-main-item">
      <div class="app-main-right"></div>
    </div> -->
  </div>
</template>
<script setup>
import { computed } from 'vue';

const props = defineProps({
  data: {
    required: true,
    type: Array,
    default: []
  }
})
const { data } = toRefs(props)
console.log(data.value);

const arr = computed(()=>{
  return data.value.filter(item=>item.assessUnit=='中国地震局')[0]
})
const brr = computed(()=>{
  return data.value.filter(item=>item.assessUnit=='国家减灾中心')[0]
})
console.log(data.value);
</script>
<style lang="scss" scoped>
.app-main {
  width: 100%;
  height: 210px;
  margin-top:10px;
  display: flex;
  justify-content: center !important;
  align-items: center;
  &-item {
    width: 210px;
    height: 200px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    //   background: red;
    background-image: url(/src/assets/images/disaterLosses/bg.png);
    background-size: 100% 100%;
    margin: 0 10px;
  }
 
  // &-right {
  //   width: 101px;
  //   height: 101px;
  //   background-image: url(/src/assets/images/common/bg_blueIcon.png);
  //   background-size: 100% 100%;
  // }
  &-num {
    // width: 46px;
    text-align: center;
    height: 33px;
    font-size: 28px;
    font-family: Helvetica Neue LT Pro-65 Medium, Helvetica Neue LT Pro;
    font-weight: normal;
    color: #46ffff;
    line-height: 46px;
  }
  &-txt {
    width: 96px;
    height: 16px;
    font-size: 16px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    line-height: 40px;
    text-align: center;
  }
}
.app-main-item:nth-child(1) .app-main-left{
  width: 101px;
    height: 101px;
    background-image: url(/src/assets/images/common/bg_icon.png);
    // background-image: url(/src/assets/images/common/bg_blueIcon.png);
    background-size: 100% 100%;
}


.app-main-item:nth-child(2)  {
  .app-main-left{
      width: 101px;
      height: 101px;
      background-image: url(/src/assets/images/common/bg_blueIcon.png);
      // background-image: url(/src/assets/images/common/bg_icon.png);
      background-size: 100% 100%;
    }
  .app-main-num{
    display: inline-block;
    text-align: center;
    height: 33px;
    font-size: 28px;
    font-family: Helvetica Neue LT Pro-65 Medium, Helvetica Neue LT Pro;
    font-weight: normal;
    color: #418DFD;
    line-height: 46px;
  }
  
  }
</style>
